<template>
  <div class="app-container">

    <el-card shadow="hover" class="data-table">
      <el-table
        v-loading="loading"
        :data="Lists"
        row-key="index"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        class="data-table__content"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="index" width="105" label="序号" :index="indexMethod"></el-table-column>

        <el-table-column prop="adName" label="广告商名称"  />
        <el-table-column prop="grade" label="广告商等级"  />
        <el-table-column prop="fee" label="开通费用"  />
        <el-table-column prop="effectiveTime" label="有效时间(天)"  />
        <el-table-column prop="createdAt" label="时间"  />

      </el-table>
        <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
          />

    </el-card>

   
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "广告商等级",
  inheritAttrs: false,
});

import MemberApi from "@/api/system/member.api";

function indexMethod(index: number) {
  return index + 1;
}

const props = defineProps({
  id: {
    type: [String, Number],
    default: 0,
  }
});
const id = props.id
console.log("id:", id);


// const queryFormRef = ref();

const loading = ref(false);
const selectIds = ref<number[]>([]);

const queryParams = reactive<any>({
  pageNum: 1,
  pageSize: 10,
});

const total = ref(0);


const Lists = ref();


// 查询
function handleQuery() {
  const json = {
    page: queryParams.pageNum || 1,
    limit: queryParams.pageSize|| 10,
    userId: id || "",
  };
  console.log(json)
  loading.value = true;
  MemberApi.Member_ad_list_URL(json)
    .then((res: any) => {
      console.log("查询结果:", res);
      if (res.length > 0) {
        Lists.value = res;
        total.value = res.length || 0;
      } else {
        Lists.value = [];
        total.value = 0;
      }
    })
    .catch((error: any) => {
      console.error("查询失败:", error);
      Lists.value = [];
    })
    .finally(() => {
      loading.value = false;
    });
}

// 重置查询
// function handleResetQuery() {
//   queryFormRef.value.resetFields();
//   handleQuery();
// }

// 处理选中项变化
function handleSelectionChange(selection: any) {
  selectIds.value = selection.map((item: any) => item.id);
}


onMounted(() => {
  handleQuery();
});
</script>
